<template>
    <div>
      <button @click="addItem">添加列表项</button>
      <button @click="removeItem">移除列表项</button>
  
      <transition-group name="list" tag="ul">
        <li v-for="(item, index) in items" :key="index">{{ item }}</li>
      </transition-group>
    </div>
  </template>
  
  <script>
  import { ref } from 'vue';
  
  export default {
    setup() {
      const items = ref([1, 2, 3]);
  
      const addItem = () => {
        items.value.push(items.value.length + 1);
      };
  
      const removeItem = () => {
        items.value.pop();
      };
  
      return {
        items,
        addItem,
        removeItem
      };
    }
  }
  </script>
  
  <style>
  .list-enter-active, .list-leave-active {
    transition: opacity 0.5s;
  }
  
  .list-enter, .list-leave-to {
    opacity: 0;
  }
  </style>
  